<template>
    <div class="page-view">
      <div class="create-view">
          <div class="left">
              <div class="upload-view">
                 <div class="btn-upload">
                     <div class="sbtn"></div>
                      <uploadFile v-model="saveForm.img" />
                </div>
              </div>
              <div class="ipt-view">
                 <input v-model="saveForm.num"  placeholder="Please enter the NFT name"  type="text" maxlength="100" /> 
              </div>
          </div>
          <div class="right">
              <div class="context-view">
                  <div class="title">NFT FORGING</div>
                  <div class="context">
                      You are forging an NFT on the ETH chain, after the forging is complete, the NFT will be automatically stored on your METADO wallet
                  </div>
                  <div class="box">
                      <div class="name">Forging ETH chain NFT requires you to pay GAS</div>
                      <div class="img-view">
                          <img  class="mimg"  src="/images/priceIcon.png" />
                          0.16<span class="unit">(≈$10.00)</span></div>
                  </div>
                  <div class="gas-view">GAS 0.001ETH</div>
                  <div class="value-view">
                      <div>Royalty:</div>
                      <div class="iptview">
                          <input v-model="saveForm.num"    type="number" maxlength="9999999" /> %
                      </div>
                  </div>
                  <div class="tips">For every transaction of your original NFT, you can earn up to 10% of royalties</div>
                  <div class="btn-save"></div>
              </div>
          </div>
      </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed,onMounted,onUnmounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Tscroll from '@/components/Tscroll.vue'
import uploadFile from '@/components/uploadFile.vue'
import confirm from '@/utils/confirm.js'
import {toast} from '@/utils/common.js'
export default {
    components:{
       Tscroll,
       uploadFile,
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo), 
            saveForm:{ 
                img:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            },
        })
        onMounted(()=>{
       
        })
       const btnSave =()=>{
            store.dispatch('customer/changePlaceContent',state.saveForm).then(res=>{
                 if(res.success){
                    toast('success')
                }else{
                    toast(res.message)
                }
            })
        }

        return{
            ...toRefs(state),
            btnSave
        }
    }
}
</script>
<style>
.create-view .uploadBtn .add{
    display: none;
}
</style>

<style lang="scss" scoped>
    .page-view{
        width:100%;
        height:100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling:touch
    }
 .create-view{
     display: flex;
     justify-content: flex-start;
     margin-top:50px;
     .left{
         width: 560px;
         .upload-view{
            background-image: url(/images/dgbg9.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size:100% 100%;
            width: 560px;
            height:500px;
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: center;
            .btn-upload{
                width:500px;
                margin:0 auto;
                height:440px;
                position: relative;
                .sbtn{
                    background-image: url(/images/btn-upload.png);
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size:100% 100%;
                    height:80px;
                    width:400px;
                    position: absolute;
                    left:50%;
                    top:50%;
                    margin-top:-40px;
                    margin-left:-200px;
                    z-index:1;
                }
            }
         }
         .ipt-view{
            width: 560px;
            height: 80px;
            background: #00317A;
            border: 1px solid #67F8FF;
            margin-top:20px;
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: center;
            input{
                background-color: transparent;
                font-size:26px;
                width:100%;
                padding:10px 20px;
                border: none;
                color: #fff;
            }
            ::-webkit-input-placeholder { 
            /* WebKit browsers，webkit内核浏览器 */
            color: #ccc; 
            font-size: 26px;
            } 
            :-moz-placeholder { 
            /* Mozilla Firefox 4 to 18 */ 
            color: #ccc; 
            font-size: 26px;
            } 
            ::-moz-placeholder { 
            /* Mozilla Firefox 19+ */ 
            color: #ccc; 
            font-size: 26px;
            } 
            :-ms-input-placeholder { 
            /* Internet Explorer 10+ */ 
            color: #ccc; 
            font-size: 26px;
            }

         }
     }
     .right{
         width: 660px;
         margin-left:30px;
         .context-view{
            background-image: url(/images/dgbg9.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size:100% 100%;
            width: 760px;
            height:680px;
            padding:30px;
            .title{
                color:#fff;
                font-size:30px;
            }
            .context{
                color:#fff;
                font-size:26px;
                padding-top:20px;
            }
            .box{
                width: 700px;
                height: 120px;
                background: rgba(103,248,255,0.3);
                border-radius: 0px 0px 0px 0px;
                margin:20px auto;
                text-align: center;
                .name{
                    padding:10px 20px;
                    font-size:26px;
                }
                .img-view{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        align-self: center;
                        .mimg{
                            height:30px;
                            margin-right:4px;
                        }
                    .unit{
                        font-size:16px;
                    }
                }
               
            }
            .gas-view{
                color:#fff;
                font-size:26px; 
                border-bottom:1px solid #ffffff30;
                padding-bottom:10px;
            }
            .value-view{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                align-self: center;
                margin:10px auto;
                  .iptview{
                    width: 300px;
                    height: 55px;
                    line-height:55px;
                    background: #67F8FF50;
                    border: 1px solid #67F8FF;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    align-self: center;
                    margin-left:10px;
                    padding-right:10px;
                    input{
                        background-color: transparent;
                        font-size:26px;
                        width:100%;
                        padding:10px 20px;
                        border: none;
                        color: #fff;
                    }
                    ::-webkit-input-placeholder { 
                    /* WebKit browsers，webkit内核浏览器 */
                    color: #ccc; 
                    font-size: 26px;
                    } 
                    :-moz-placeholder { 
                    /* Mozilla Firefox 4 to 18 */ 
                    color: #ccc; 
                    font-size: 26px;
                    } 
                    ::-moz-placeholder { 
                    /* Mozilla Firefox 19+ */ 
                    color: #ccc; 
                    font-size: 26px;
                    } 
                    :-ms-input-placeholder { 
                    /* Internet Explorer 10+ */ 
                    color: #ccc; 
                    font-size: 26px;
                    }

                }
            }
            .tips{
                color:#fff;
                font-size:26px;
            }
            .btn-save{
                background-image: url(/images/adRelease/btn-confim.png);
                background-position: center;
                background-repeat: no-repeat;
                background-size:100% 100%;
                width: 160px;
                height:60px;
                margin-top:10px;
            }
         }
     }
 }
</style>